<!--
 * @Descripttion:
 * @version:
 * @Author: cdy
 * @Date: 2025-06-30 10:13:46
 * @LastEditors: cdy
 * @LastEditTime: 2025-08-10 16:44:40
-->
<template>
  <div class="pageContain">
    <!-- <div class="chartR2" style="width: 300px; height: 300px"></div> -->
    <div class="bigTop">
      <div class="bigTopName divCenter">
        爱信(安庆)汽车零部件有限公司能源管理平台
      </div>
    </div>

    <div class="backIndex" @click="backIndexPage()"></div>
    <div class="changePage">
      <el-select v-model="changePageName" @change="changeShow()">
        <el-option label="首页大屏" value="首页大屏"></el-option>
        <el-option label="分组大屏" value="分组大屏"></el-option>
      </el-select>
    </div>

    <div class="bigCenter divJustFlex">
      <div class="bigLeft">
        <div class="bigLeftTop">
          <div class="bigTopUse divBeteewn">
            <div class="bigChartName">公司总用电量</div>
            <div class="bigUnit divFlex">
              <div style="font-size: 0.8vw">时间:</div>

              <el-select
                v-model="selectLong"
                style="width: 4vw; color: white"
                @change="selectTimeDuring()"
              >
                <el-option lable="天" value="天"></el-option>
                <el-option lable="周" value="周"></el-option>
                <el-option lable="月" value="月"></el-option>
                <el-option lable="年" value="年"></el-option>
              </el-select>
              <el-checkbox
                v-model="checked"
                class="checkbox1"
                style="margin-left: 0.5vw"
                @change="hourTime = ''"
              ></el-checkbox>
              <div class="deleteWeek">自定义时间</div>
              <div style="font-size: 0.8vw; margin-left: 0.5vw">时间1:</div>
              <el-config-provider :locale="locale">
                <el-date-picker
                  v-if="selectLong == '天' && !checked"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date1"
                  type="date"
                  placeholder="时间1"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-model="date1"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-if="selectLong == '天' && checked"
                  type="datetime"
                  placeholder="时间1"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DD HH:mm"
                  date-format="YYYY-MM-DD"
                  time-format="HH:mm"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-if="selectLong == '月'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date1"
                  type="month"
                  placeholder="时间1"
                  format="YYYY-MM"
                  value-format="YYYY-MM"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-if="selectLong == '周'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date1"
                  type="week"
                  format="YYYY-ww"
                  :first-day-of-week="1"
                  value-format="YYYY-ww"
                  placeholder="时间1"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-if="selectLong == '年'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date1"
                  type="year"
                  placeholder="时间1"
                  format="YYYY"
                  value-format="YYYY"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
              </el-config-provider>
              <div style="font-size: 0.8vw; margin-left: 0.5vw" v-if="checked">
                时间2:
              </div>
              <el-config-provider :locale="locale" v-if="checked">
                <el-date-picker
                  v-model="date2"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-if="selectLong == '天' && checked"
                  type="datetime"
                  placeholder="时间2"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DD HH:mm"
                  date-format="YYYY-MM-DD"
                  time-format="HH:mm"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-if="selectLong == '月'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date2"
                  type="month"
                  placeholder="时间2"
                  format="YYYY-MM"
                  value-format="YYYY-MM"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-if="selectLong == '周'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date2"
                  type="week"
                  placeholder="时间2"
                  format="YYYY-ww"
                  value-format="YYYY-ww"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
                <el-date-picker
                  v-if="selectLong == '年'"
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="date2"
                  type="year"
                  placeholder="时间2"
                  format="YYYY"
                  value-format="YYYY"
                  :disabled-date="disabledDate"
                  @change="caculateTimeS(date1, date2)"
                />
              </el-config-provider>
            </div>
          </div>
          <div class="chart1Contain" v-loading="loading">
            <div class="chart1"></div>
          </div>
        </div>
        <div class="bigLeftTop" style="margin-top: 2vh">
          <div class="bigTopUse divBeteewn">
            <div class="bigChartName">分组用能占比</div>
            <div class="bigUnit divFlex">
              <div style="font-size: 1vw">日期:</div>
              <el-config-provider :locale="locale">
                <el-date-picker
                  style="margin-left: 0.5vw; width: 10vw"
                  v-model="groupEnenger"
                  type="date"
                  placeholder="开始实行时间"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate"
                  @change="getUserPresent()"
                />
              </el-config-provider>
            </div>
          </div>
          <div class="bigBingContain">
            <div class="bigLeftArr" @click="clickLeft()"></div>
            <div class="bigBing">
              <div class="oneContain" v-for="(item, index) in groupAll">
                <div class="bingContain divCenter">
                  <div class="chartAndBigName">
                    <div class="chart3d" :calss="'chart3d' + index"></div>
                    <div class="chartName">{{ item.name }}</div>
                    <div class="powerAll">
                      <div>用电量：{{ item.total }}KW.h</div>
                    </div>
                    <div class="chartName">
                      占比:{{ formatNumberT((item.total / total) * 100) }}%
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="oneContain">
                <div class="bingContain divCenter">
                  <div class="chartAndBigName">
                    <div class="chart3" ref="chart3"></div>
                  </div>

                  <div class="powerAll">
                    <div>功率：<span style="color: #fdbc22">15KW.h</span></div>
                    <div>
                      总功率：<span style="color: #fdbc22">9999KW.h</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="oneContain">
                <div class="bingContain divCenter">
                  <div class="chartAndBigName">
                    <div class="chart4" ref="chart4"></div>
                  </div>

                  <div class="powerAll">
                    <div>功率：<span style="color: #ec66ef">15KW.h</span></div>
                    <div>
                      总功率：<span style="color: #ec66ef">9999KW.h</span>
                    </div>
                  </div>
                </div>
              </div> -->
            </div>
            <div class="bigRightArr" @click="clickRight()"></div>
          </div>
        </div>
      </div>
      <div class="bigRight">
        <div class="bigRightTop">
          <div class="bigTopUse divBeteewn">
            <div class="bigChartName" style="margin-top: 1.5vh">设备状态</div>
          </div>
          <div class="shebeiContain">
            <div class="chart5"></div>
            <div class="rightText">
              <div class="textBox">
                <div class="textBoxTop divFlex">
                  <div class="boxLeft">
                    <div class="dot"></div>
                    <div class="dotName" style="color: #00c659">正常设备</div>
                  </div>

                  <div class="endName" style="color: #00c03f">
                    {{ deviceStatus.online }}
                  </div>
                </div>
                <div class="sheBeiLine">
                  <div class="lineSmall"></div>
                </div>
              </div>
              <div class="textBox">
                <div class="textBoxTop divFlex">
                  <div class="boxLeft">
                    <div
                      class="dot"
                      style="
                        background: linear-gradient(to right, #fefec5, #f5f01a);
                      "
                    ></div>
                    <div class="dotName" style="color: #f8f454">告警设备</div>
                  </div>

                  <div class="endName" style="color: #f8f454">
                    {{ deviceStatus.warn }}
                  </div>
                </div>
                <div class="sheBeiLine">
                  <div
                    class="lineSmall"
                    style="
                      background: linear-gradient(to right, #fefec5, #f5f01a);
                      width: 20%;
                    "
                  ></div>
                </div>
              </div>
              <div class="textBox">
                <div class="textBoxTop divFlex">
                  <div class="boxLeft">
                    <div
                      class="dot"
                      style="
                        background: linear-gradient(to right, #f9d49e, #e63e08);
                      "
                    ></div>
                    <div class="dotName" style="color: #e74a14">离线设备</div>
                  </div>

                  <div class="endName" style="color: #e74a14">
                    {{ deviceStatus.offline }}
                  </div>
                </div>
                <div class="sheBeiLine">
                  <div
                    class="lineSmall"
                    style="
                      background: linear-gradient(to right, #f9d49e, #e63e08);
                      width: 20%;
                    "
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="smallRightLast">
          <div class="bigTopUse divBeteewn">
            <div class="bigChartName" style="margin-top: 1.5vh">告警信息</div>
          </div>
          <div class="tableContain indexPageTable">
            <el-table
              :data="dataList"
              style="width: 100%; margin: auto; height: auto; margin-top: 1vh"
              max-height="14vh"
              empty-text="暂无数据"
              :header-row-style="{
                fontSize: '0.8vw',
                color: '#00F2FF',
                backgroundColor: '#023471',
                borderBottom: '1px solid #EBEEF5',
                borderRight: '1px solid #EBEEF5',
              }"
              :cell-style="{
                fontSize: '0.6vw',
                color: 'white',
              }"
            >
              <el-table-column
                label="设备名称"
                align="center"
                prop="deviceName"
                min-width="150"
              ></el-table-column>

              <el-table-column
                label="告警时间"
                align="center"
                prop="warnTime"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                label="告警等级"
                align="center"
                prop="warnLevel"
                min-width="70"
              >
                <template #default="scope">
                  <div v-if="scope.row.warnLevel == 1">一级告警</div>
                  <div v-if="scope.row.warnLevel == 2">二级告警</div>
                  <div v-if="scope.row.warnLevel == 3">三级告警</div>
                </template></el-table-column
              >
              <el-table-column
                label="当前状态"
                align="center"
                prop="warnType"
                min-width="70"
              >
                <template #default="scope">
                  <div v-if="scope.row.warnType == 1">离线</div>
                  <div v-if="scope.row.warnType == 2">电压丢失</div>
                  <div v-if="scope.row.warnType == 3">电压异常</div>
                  <div v-if="scope.row.warnType == 4">超阀值</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="bigCenter manySmallContain divFlex">
      <div class="everyCharts">
        <div class="topSelect divBeteewn">
          <el-select
            class="big"
            v-model="selectLast"
            style="width: 6vw; color: white; margin-left: 1vw"
            @change="this.getCityLine()"
          >
            <el-option lable="市电" value="市电"></el-option>
            <el-option lable="燃气" value="燃气"></el-option>
            <el-option lable="光伏" value="光伏"></el-option>
          </el-select>
          <div class="bigUnit divFlex">
            <div style="font-size: 0.8vw; color: white">时间:</div>

            <el-select
              v-model="cityLong"
              style="width: 4vw; color: white"
              @change="clearDate()"
            >
              <el-option lable="天" value="天"></el-option>
              <el-option lable="周" value="周"></el-option>
              <el-option lable="月" value="月"></el-option>
              <el-option lable="年" value="年"></el-option>
            </el-select>
            <el-checkbox
              v-model="citychecked"
              class="checkbox1"
              style="margin-left: 0.5vw"
            ></el-checkbox>
            <div class="deleteWeek">自定义时间</div>
            <div style="font-size: 0.8vw; margin-left: 0.5vw; color: white">
              时间1:
            </div>
            <el-config-provider :locale="locale">
              <el-date-picker
                v-if="cityLong == '天' && !citychecked"
                style="margin-left: 0.5vw; width: 7vw; margin-right: 0.5vw"
                v-model="cityDate1"
                type="date"
                placeholder="时间1"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled-date="disabledDate"
                @change="caculateTimeS1(cityDate1, cityDate2)"
              />
              <el-date-picker
                v-model="cityDate1"
                style="margin-left: 0.5vw; width: 9.5vw"
                v-if="cityLong == '天' && citychecked"
                type="datetime"
                placeholder="时间1"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
                date-format="YYYY-MM-DD"
                time-format="HH:mm"
                :disabled-date="disabledDate"
                @change="caculateTimeS1(cityDate1, cityDate2)"
              />
              <el-date-picker
                v-if="cityLong == '月'"
                style="margin-left: 0.5vw; width: 6.5vw; margin-right: 0.5vw"
                v-model="cityDate1"
                type="month"
                placeholder="时间1"
                format="YYYY-MM"
                value-format="YYYY-MM"
                :disabled-date="disabledDate"
                @change="caculateTimeS1(cityDate1, cityDate2)"
              />
              <el-date-picker
                v-if="cityLong == '周'"
                style="margin-left: 0.5vw; width: 6.5vw; margin-right: 0.5vw"
                v-model="cityDate1"
                type="week"
                format="YYYY-ww"
                value-format="YYYY-ww"
                placeholder="时间1"
                :disabled-date="disabledDate"
                @change="caculateTimeS1(cityDate1, cityDate2)"
              />
              <el-date-picker
                v-if="cityLong == '年'"
                style="margin-left: 0.5vw; width: 6vw; margin-right: 0.5vw"
                v-model="cityDate1"
                type="year"
                placeholder="时间1"
                format="YYYY"
                value-format="YYYY"
                :disabled-date="disabledDate"
                @change="caculateTimeS1(cityDate1, cityDate2)"
              />
            </el-config-provider>
            <div style="font-size: 0.8vw; color: white" v-if="citychecked">
              时间2:
            </div>
            <el-config-provider :locale="locale" v-if="citychecked">
              <el-date-picker
                v-model="cityDate2"
                style="margin-left: 0.5vw; width: 9.5vw; margin-right: 0.5vw"
                v-if="cityLong == '天' && citychecked"
                type="datetime"
                placeholder="时间1"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
                date-format="YYYY-MM-DD"
                time-format="HH:mm"
                :disabled-date="disabledDate"
                @change="caculateTimeS1(cityDate1, cityDate2)"
              />
              <el-date-picker
                v-if="cityLong == '月'"
                style="margin-left: 0.5vw; width: 6.5vw; margin-right: 0.5vw"
                v-model="cityDate2"
                type="month"
                placeholder="时间2"
                format="YYYY-MM"
                value-format="YYYY-MM"
                :disabled-date="disabledDate"
                @change="caculateTimeS1(cityDate1, cityDate2)"
              />
              <el-date-picker
                v-if="cityLong == '周'"
                style="margin-left: 0.5vw; width: 6.5vw; margin-right: 0.5vw"
                v-model="cityDate2"
                type="week"
                placeholder="时间2"
                format="YYYY-ww"
                value-format="YYYY-ww"
                :disabled-date="disabledDate"
                @change="caculateTimeS1(cityDate1, cityDate2)"
              />
              <el-date-picker
                v-if="cityLong == '年'"
                style="margin-left: 0.5vw; width: 6.5vw; margin-right: 0.5vw"
                v-model="cityDate2"
                type="year"
                placeholder="时间2"
                format="YYYY"
                value-format="YYYY"
                :disabled-date="disabledDate"
                @change="caculateTimeS1(cityDate1, cityDate2)"
              />
            </el-config-provider>
          </div>
        </div>
        <div class="chart6"></div>
      </div>
      <div class="everyCharts" style="margin-right: 1vw">
        <div class="topSelect divBeteewn">
          <div
            class="topSlectName"
            style="color: white; font-size: 0.8vw; margin-left: 1vw"
          >
            碳排放
          </div>
          <div class="bigUnit divFlex">
            <div style="font-size: 0.8vw; color: white">时间:</div>

            <el-select
              v-model="COLong"
              style="width: 4vw; color: white"
              @change="selectTimeDuring1()"
            >
              <el-option lable="天" value="天"></el-option>
              <el-option lable="周" value="周"></el-option>
              <el-option lable="月" value="月"></el-option>
              <el-option lable="年" value="年"></el-option>
            </el-select>
            <el-checkbox
              v-model="COchecked"
              class="checkbox1"
              style="margin-left: 0.5vw"
            ></el-checkbox>
            <div class="deleteWeek">自定义时间</div>
            <div style="font-size: 0.8vw; margin-left: 0.5vw; color: white">
              时间1:
            </div>
            <el-config-provider :locale="locale">
              <el-date-picker
                v-if="COLong == '天'"
                style="margin-left: 0.5vw; width: 7vw; margin-right: 0.5vw"
                v-model="CODate1"
                type="date"
                placeholder="时间1"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled-date="disabledDate"
                @change="caculateTimeS2(CODate1, CODate2)"
              />
              <el-date-picker
                v-if="COLong == '月'"
                style="margin-left: 0.5vw; width: 7vw; margin-right: 0.5vw"
                v-model="CODate1"
                type="month"
                placeholder="时间1"
                format="YYYY-MM"
                value-format="YYYY-MM"
                :disabled-date="disabledDate"
                @change="caculateTimeS2(CODate1, CODate2)"
              />
              <el-date-picker
                v-if="COLong == '周'"
                style="margin-left: 0.5vw; width: 7vw; margin-right: 0.5vw"
                v-model="CODate1"
                type="week"
                format="YYYY-ww"
                value-format="YYYY-ww"
                placeholder="时间1"
                :disabled-date="disabledDate"
                @change="caculateTimeS2(CODate1, CODate2)"
              />
              <el-date-picker
                v-if="COLong == '年'"
                style="margin-left: 0.5vw; width: 7vw; margin-right: 0.5vw"
                v-model="CODate1"
                type="year"
                placeholder="时间1"
                format="YYYY"
                value-format="YYYY"
                :disabled-date="disabledDate"
                @change="caculateTimeS2(CODate1, CODate2)"
              />
            </el-config-provider>
            <div style="font-size: 0.8vw; color: white" v-if="COchecked">
              时间2:
            </div>
            <el-config-provider :locale="locale" v-if="COchecked">
              <el-date-picker
                v-if="COLong == '天'"
                style="margin-left: 0.5vw; width: 7vw; margin-right: 0.5vw"
                v-model="CODate2"
                type="date"
                placeholder="时间2"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled-date="disabledDate"
                @change="caculateTimeS2(CODate1, CODate2)"
              />
              <el-date-picker
                v-if="COLong == '月'"
                style="margin-left: 0.5vw; width: 7vw; margin-right: 0.5vw"
                v-model="CODate2"
                type="month"
                placeholder="时间2"
                format="YYYY-MM"
                value-format="YYYY-MM"
                :disabled-date="disabledDate"
                @change="caculateTimeS2(CODate1, CODate2)"
              />
              <el-date-picker
                v-if="COLong == '周'"
                style="margin-left: 0.5vw; width: 7vw; margin-right: 0.5vw"
                v-model="CODate2"
                type="week"
                placeholder="时间2"
                format="YYYY-ww"
                value-format="YYYY-ww"
                :disabled-date="disabledDate"
                @change="caculateTimeS2(CODate1, CODate2)"
              />
              <el-date-picker
                v-if="COLong == '年'"
                style="margin-left: 0.5vw; width: 7vw; margin-right: 0.5vw"
                v-model="CODate2"
                type="year"
                placeholder="时间2"
                format="YYYY"
                value-format="YYYY"
                :disabled-date="disabledDate"
                @change="caculateTimeS2(CODate1, CODate2)"
              />
            </el-config-provider>
          </div>
        </div>
        <div class="chart7"></div>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import service from "@/api/api";
import $ from "jquery";
import * as echarts from "echarts";
import "echarts-gl";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import dayjs from "dayjs";
dayjs.en.weekStart = 1;
import {
  getToday,
  getYearRange,
  generateWeekRange,
  generateMonthRange,
  getDateRange,
  completeMissingTimes,
  getTodayArr,
  formatNumberList,
  processData,
  processGuangFuDayHour1,
  processGuangFuDayHour,
  transforCheckDay,
  deilWithMonth,
  deilWithYear,
  option4Line,
  firstCityWeek,
  transformData,
  getChooseTime,
  completeTimeRange,
  getFormatHourTime,
  transforCheckDay1,
  deilWithYear1,
  transformData1,
  deilWithMonth1,
  Indexoption5Three,
  getWeekDateRange,
  getMonthDates,
  arrEach,
  arrEachsingle,
  arrEachfour,
  arrEachThree,
  getYearMonths,
  formatNumber,
} from "@/mitt/until.js";

let chrat1 = null;
let chart2 = null;
let chart3 = null;
let chart4 = null;
let chart5 = null;
let chart6 = null;
let chart7 = null;
let chartContainList = [];
let totalNumber = [];

export default {
  data() {
    return {
      groupAll: [],
      pieList: [],
      nenegerAll: 5000,
      groupEnenger: "",
      hourTime: "",
      cityTime: "",
      cityLong: "天",
      cityDate1: "",
      cityDate2: "",
      citychecked: false,

      COTime: "",
      COLong: "天",
      CODate1: "",
      CODate2: "",
      COchecked: false,
      allDevice: null,
      deviceStatus: {
        online: 0,
        onlinePresent: 0,
        offline: 0,
        offlinePresent: 0,
        warn: 0,
        warnPresent: 0,
      },
      rightChart2: "",
      selectLong: "天",
      deviceTypeList: [],

      optionLine: {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            const currentIndex = params[0].dataIndex;

            // seriesName;
            let result =
              params[0].axisValue +
              "<br/>" +
              params[0].seriesName +
              ":" +
              params[0].value +
              "<br/>";
            let sum = 0;

            for (let i = 0; i < currentIndex + 1; i++) {
              const item = totalNumber[i];
              // 将 null 视为 0
              if (item === null) {
                sum += 0;
                continue;
              }
              // 尝试转换为数字
              const num = Number(item);
              // 只有是有效数字才累加
              if (!isNaN(num)) {
                sum += num;
              }
            }

            result += `累计值: ${sum}`;
            return result;
          },
        },
        legend: {
          data: ["总功率"],
          top: 0,
          left: "center",
          itemWidth: 20,
          // 单个图例项的图标高度
          itemHeight: 12,
          textStyle: {
            fontFamily: "mei",
            color: "white", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 12,
            fontWeight: "bold",
          },
        },
        grid: {
          top: "15%",
          left: "3%",
          right: "8%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "时间",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          data: [],

          axisLabel: {
            formatter: function (value) {
              const minutes = value.split(":")[1]; // 提取分钟部分
              return minutes === "00" || minutes === "30" ? value : "";
            },
            rotate: 45,
            // 避免空标签占用空间
            interval: 0,
            color: "white",
            fontSize: 12,
            fontFamily: "mei",
          },
          axisLine: {
            lineStyle: {
              color: "#5D6A94",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "单位:KW.h",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },

          axisLabel: {
            color: "white",
            fontSize: 12,
            fontFamily: "mei",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#5D6A94",
            },
          },

          splitLine: {
            show: false,
            lineStyle: {
              color: ["#1B2648"],
              width: 1,
              type: "dashed",
            },
          },
          axisTick: {
            show: true,
          },
        },
        series: [
          {
            name: "总功率",
            type: "line",
            symbol: "circle",
            symbolSize: 0,
            z: 1,

            itemStyle: {
              color: "#19A3DF",
              borderColor: "white", // 边框颜色
              borderWidth: 2, // 边框宽度
              borderType: "solid",
            },
            lineStyle: {
              color: "#19A3DF",
            },
            label: {
              show: false,
              color: "#FFBF28",
            },
            labelLayout: { hideOverlap: true },
            data: [
              0.55, 0.15, 0.28, 0.84, 0.33, 0.15, 0.95, 0.18, 0.84, 0.83, 0.55,
              0.55, 0.15, 0.28, 0.83, 0.55, 0.65, 0.78, 0.84, 0.83, 0.15, 0.28,
              0.84, 0.33,
            ],
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(25,163,223,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(25,163,223, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            smooth: true,
          },
        ],
      },
      optionDay: {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            const currentIndex = params[0].dataIndex;

            // seriesName;
            let result =
              params[0].axisValue +
              "<br/>" +
              params[0].seriesName +
              ":" +
              params[0].value +
              "<br/>";
            let sum = 0;

            for (let i = 0; i < currentIndex + 1; i++) {
              const item = totalNumber[i];
              // 将 null 视为 0
              if (item === null) {
                sum += 0;
                continue;
              }
              // 尝试转换为数字
              const num = Number(item);
              // 只有是有效数字才累加
              if (!isNaN(num)) {
                sum += num;
              }
            }

            result += `累计值: ${sum}`;
            return result;
          },
        },
        legend: {
          data: ["总功率"],
          top: 0,
          left: "center",
          itemWidth: 20,
          // 单个图例项的图标高度
          itemHeight: 12,
          textStyle: {
            fontFamily: "mei",
            color: "white", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 12,
            fontWeight: "bold",
          },
        },
        grid: {
          top: "18%",
          left: "3%",
          right: "8%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "时间",

          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          data: [],

          axisLabel: {
            // formatter: function (value) {
            //   return value;
            // },
            rotate: 45,
            // // 避免空标签占用空间
            // interval: 0,
            color: "white",
            // fontSize: 12,
            fontFamily: "mei",
          },
          axisLine: {
            lineStyle: {
              color: "#5D6A94",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "单位:KW.h",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },

          axisLabel: {
            color: "white",
            fontSize: 12,
            fontFamily: "mei",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#5D6A94",
            },
          },

          splitLine: {
            show: false,
            lineStyle: {
              color: ["#1B2648"],
              width: 1,
              type: "dashed",
            },
          },
          axisTick: {
            show: true,
          },
        },
        series: [
          {
            name: "总功率",
            type: "line",
            symbol: "circle",
            symbolSize: 0,
            z: 1,

            itemStyle: {
              color: "#19A3DF",
              borderColor: "white", // 边框颜色
              borderWidth: 2, // 边框宽度
              borderType: "solid",
            },
            lineStyle: {
              color: "#19A3DF",
            },
            label: {
              show: false,
              color: "#FFBF28",
            },
            labelLayout: { hideOverlap: true },
            data: [],
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(25,163,223,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(25,163,223, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            smooth: true,
          },
        ],
      },
      selectPro: "MA产线",
      checked: false,
      date1: "",
      date2: "",
      locale: zhCn,
      loading: false,
      option1: {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            const currentIndex = params[0].dataIndex;

            // seriesName;
            let result =
              params[0].axisValue +
              "<br/>" +
              params[0].seriesName +
              ":" +
              params[0].value +
              "<br/>";
            let sum = 0;

            for (let i = 0; i < currentIndex + 1; i++) {
              const item = totalNumber[i];
              // 将 null 视为 0
              if (item === null) {
                sum += 0;
                continue;
              }
              // 尝试转换为数字
              const num = Number(item);
              // 只有是有效数字才累加
              if (!isNaN(num)) {
                sum += num;
              }
            }

            result += `累计值: ${sum}`;
            return result;
          },
        },
        grid: {
          top: "15%",
          left: "3%",
          right: "8%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "时间",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          data: [],

          axisLabel: {
            formatter: function (value) {
              const minutes = value.split(":")[1]; // 提取分钟部分
              return minutes === "00" || minutes === "30" ? value : "";
            },
            rotate: 45,
            // 避免空标签占用空间
            interval: 0,
            fontFamily: "mei",
            color: "white",
            fontSize: 12,
          },
          axisLine: {
            lineStyle: {
              color: "#5D6A94",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "单位:KW.h",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },

          axisLabel: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#5D6A94",
            },
          },

          splitLine: {
            show: false,
            lineStyle: {
              color: ["#1B2648"],
              width: 1,
              type: "dashed",
            },
          },
          axisTick: {
            show: true,
          },
        },
        series: [
          {
            name: "总功耗",
            type: "line",
            symbol: "circle",
            symbolSize: 0,
            z: 1,

            itemStyle: {
              color: "#19A3DF",
              borderColor: "white", // 边框颜色
              borderWidth: 2, // 边框宽度
              borderType: "solid",
            },
            lineStyle: {
              color: "#19A3DF",
            },
            label: {
              show: false,
              color: "#FFBF28",
            },
            labelLayout: { hideOverlap: true },
            data: [
              0.55, 0.15, 0.28, 0.84, 0.33, 0.15, 0.95, 0.18, 0.84, 0.83, 0.55,
              0.55, 0.15, 0.28, 0.83, 0.55, 0.65, 0.78, 0.84, 0.83, 0.15, 0.28,
              0.84, 0.33,
            ],
            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(25,163,223,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(25,163,223, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            smooth: true,
          },
        ],
      },

      option2: {
        series: [
          {
            type: "pie",
            radius: ["65%", "90%"],
            roundCap: true,
            color: ["#1D98FC", "#57D55D"],
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
              },
            },
            labelLine: {
              show: false,
            },
            data: [200, 300],
          },
        ],
      },
      option3: {
        grid: { left: 0, right: 0 },
        tooltip: {
          trigger: "item",
          // formatter: function (params) {
          //   return params.data.name + "<br/>" + params.data.value;
          // },
          // formatter: "{a} <br/>{b}: {c} ({d}%)",
          position: "right",
        },
        series: [
          {
            name: "设备状态",
            type: "pie",
            radius: ["65%", "90%"],
            avoidLabelOverlap: false,
            label: {
              show: false, // 默认不显示标签
              position: "center",
            },
            color: ["#E74A14", "#F8F454", "#00C659"],
            emphasis: {
              label: {
                show: false, // hover 时显示中心标签
                fontSize: 40,

                formatter: "{b}\n{d}%", // 自定义强调状态下的标签内容
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },

      dataList: [
        { name: "XXXX采集器", SN: "SN号", state: "离线", level: "一级" },
        { name: "XXXX采集器", SN: "SN号", state: "电压丢失", level: "二级" },
        { name: "XXXX采集器", SN: "SN号", state: "离线", level: "一级" },
        { name: "XXXX采集器", SN: "SN号", state: "电压丢失", level: "三级" },
      ],
      selectTime: "天",
      bigScreen: false,
      option4: {
        // 标题配置
        legend: {
          data: ["电力"],
          top: 0,
          left: "center",
          itemWidth: 20,
          // 单个图例项的图标高度
          itemHeight: 12,
          textStyle: {
            fontFamily: "mei",
            color: "white", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 12,
            fontWeight: "bold",
          },
        },
        // 提示框配置
        tooltip: {
          trigger: "axis",
        },

        // 网格配置
        grid: {
          left: "1%",
          right: "10%",
          bottom: "8%",
          top: "21%",
          containLabel: true,
        },

        // X轴配置
        xAxis: [
          {
            type: "category",
            name: "时间(小时)",
            nameTextStyle: {
              color: "white",
              fontFamily: "mei",
              fontSize: 12,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#5D6A94",
              },
            },
            axisLabel: {
              color: "white", // 设置为红色
              fontSize: 12, // 字体大小
              fontFamily: "mei",
              // 字体粗细
            },
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
            ],
            // axisPointer: {
            //   type: "shadow",
            // },
          },
        ],

        // Y轴配置（双Y轴）
        yAxis: [
          {
            type: "value",
            name: "单位:KW.h",
            nameTextStyle: {
              color: "white",
              fontFamily: "mei",
              fontSize: 12,
            },

            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#5D6A94",
              },
            },
            axisLabel: {
              color: "white", // 设置为红色
              fontSize: 12, // 字体大小
              fontFamily: "mei",
            },
          },
        ],

        // 系列配置
        series: [
          // 柱状图系列（销量）
          {
            type: "line",
            symbol: "circle",
            name: "电力",
            symbolSize: 0,
            // barWidth: "30%",
            data: [23, 51, 37, 49, 35, 21, 33, 56, 32, 12, 43, 13],
            itemStyle: {
              color: "#19A3DF",
              borderColor: "white", // 边框颜色
              borderWidth: 2, // 边框宽度
              borderType: "solid",
            },
            lineStyle: {
              color: "#19A3DF",
            },
            label: {
              show: false,
              color: "#FFBF28",
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(25,163,223,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(25,163,223, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                shadowBlur: 20,
              },
            },
            smooth: true,
          },
        ],
      },
      option4Line: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["电力"],
          top: 0,
          left: "center",
          itemWidth: 20,
          // 单个图例项的图标高度
          itemHeight: 12,
          textStyle: {
            fontFamily: "mei",
            color: "white", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 12,
            fontWeight: "bold",
          },
        },
        // 网格配置
        grid: {
          left: "4%",
          right: "10%",
          bottom: "18%",
          top: "21%",
        },

        // X轴配置
        xAxis: [
          {
            type: "category",
            name: "时间",
            nameTextStyle: {
              color: "white",
              fontFamily: "mei",
              fontSize: 12,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#5D6A94",
              },
            },
            axisLabel: {
              color: "white", // 设置为红色
              fontSize: 12, // 字体大小
              fontFamily: "mei",
              // 字体粗细
              hideOverlap: true,
            },
            data: [],
            axisPointer: {
              type: "shadow",
            },
          },
        ],

        // Y轴配置（双Y轴）
        yAxis: [
          {
            name: "市电",
            nameTextStyle: {
              color: "white",
              fontFamily: "mei",
              fontSize: 12,
            },
            type: "value",
            min: 0,
            axisLabel: {
              formatter: "{value}",
              fontFamily: "mei",
              color: "white",
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#5D6A94",
              },
            },
          },
        ],

        // 系列配置
        series: [
          // 柱状图系列（销量）
          {
            type: "line",
            symbol: "circle",
            symbolSize: 0,
            name: "电力",
            // barWidth: "30%",
            data: [],
            itemStyle: {
              color: "#19A3DF",
              borderColor: "white", // 边框颜色
              borderWidth: 2, // 边框宽度
              borderType: "solid",
            },
            lineStyle: {
              color: "#19A3DF",
            },
            label: {
              show: false,
              color: "#FFBF28",
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(25,163,223,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(25,163,223, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                shadowBlur: 20,
              },
            },
            smooth: true,
          },
        ],
      },
      option5: {
        // 标题配置
        tooltip: {
          trigger: "axis",
        },
        // 提示框配置
        grid: {
          left: "3%",
          right: "8%",
          top: "20%",
          bottom: "18%",
        },
        legend: {
          itemWidth: 20,
          // 单个图例项的图标高度
          itemHeight: 12,
          data: ["电力", "燃气"],
          top: 0,
          left: "center",
          textStyle: {
            fontFamily: "mei",
            color: "white", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 12,
          },
        },
        xAxis: {
          name: "时间",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
          },
          type: "category",
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "white",
            fontWeight: 600,
            fontFamily: "mei",
          },
          axisLine: {
            lineStyle: {
              color: "#5D6A94",
            },
          },
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        },
        yAxis: {
          name: "单位:t-CO₂",
          nameTextStyle: {
            color: "white",
            fontFamily: "mei",
            fontSize: 12,
            padding: [0, 0, 0, 10],
          },
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#5D6A94",
            },
          },
          axisLabel: {
            color: "white",
            fontFamily: "mei",
            fontSize: 10,
          },
          splitLine: {
            show: false,
          },
        },

        series: [
          {
            name: "电力",
            data: [40, 26, 50, 80, 70, 60, 30, 40, 26, 50, 80, 40],
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#78B029",
            },
            barWidth: "50%",
            barMaxWidth: 20,
          },
          {
            name: "燃气",
            data: [10, 50, 90, 40, 70, 80, 70, 10, 50, 90, 40, 70],
            label: {
              show: true,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#00C0E0",
            },
            barWidth: "50%",
            barMaxWidth: 20,
          },
        ],
      },
      selectLast: "市电",
      changePageName: "首页大屏",
    };
  },
  props: [],
  components: {},

  filters: {},
  methods: {
    formatNumberT(num) {
      if (Number.isInteger(num)) {
        return num.toString(); // 整数直接返回字符串形式
      } else {
        return num.toFixed(2); // 小数保留 2 位
      }
    },
    initPie(element, data) {
      const chart = echarts.init(element);
      let option = {
        // backgroundColor: "#0B1837",
        color: [
          "#EAEA26",
          "#906BF9",
          "#FE5656",
          "#01E17E",
          "#3DD1F9",
          "#FFAD05",
        ],
        // color: ["#2692DD", "#4ea7e6", "#77b9e8"],
        grid: {
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          // formatter: "{b}\n{c} ({d}%)",
          formatter: function (params) {
            return (
              params.name +
              "\n" +
              params.value +
              "Kw.h" +
              " (" +
              formatNumber(params.percent) +
              "%)"
            );
          },
          position: function (point, params, dom, rect, size) {
            // point: 鼠标位置
            // params: 包含系列数据的对象
            // dom: tooltip 的 DOM 元素
            // rect: 图形元素矩形
            // size: 容器大小（包含 dom 的尺寸）

            // 设置 tooltip 在鼠标右侧
            var x = point[0]; // 向右偏移 10px

            // 计算垂直居中位置
            var y = size.viewSize[1] / 3;

            // 确保 tooltip 不会超出容器
            if (y < 0) y = 0;
            if (y + dom.offsetHeight > size.contentSize[1]) {
              y = size.viewSize[1] - dom.offsetHeight;
            }

            return [0, y];
          },
        },
        polar: {},
        angleAxis: {},
        radiusAxis: {},
        calculable: true,
        series: [
          {
            stack: "a",
            type: "pie",
            radius: ["30%", "80%"],
            roseType: "area",
            zlevel: 10,
            label: {
              normal: {
                show: true,
                // formatter: "{c}",
                formatter: function (params) {
                  return (
                    params.name +
                    "\n" +
                    params.value +
                    "Kw.h" +
                    " (" +
                    formatNumber(params.percent) +
                    "%)"
                  );
                },
                textStyle: {
                  fontSize: 10,
                },
                position: "outside",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 5,
                length2: 5,
              },
              emphasis: {
                show: false,
              },
            },
            data: data,
          },
        ],
      };
      chart.setOption(option);
      chartContainList.push(chart);
    },

    async getCOLineNumber() {
      let type = null;
      let data = {};
      let time1 = [];
      type = getChooseTime(this.COLong);

      if (this.COchecked) {
        if (!this.CODate2 || !this.CODate1) {
          this.$message({
            message: "自定义状态下,时间1与时间2必须同时存在",
            type: "warning",
          });
        } else {
          if (type == 2) {
            data = {
              type: type,
              flag: this.COchecked,
              startTime: this.CODate1.replace("-", ""),
              endTime: this.CODate2.replace("-", ""),
            };
          } else {
            data = {
              type: type,
              flag: this.COchecked,
              startTime: this.CODate1,
              endTime: this.CODate2,
            };
          }
        }
      } else if (!this.COchecked) {
        if (!this.CODate1) {
          this.$message({
            message: "时间1不可缺少",
            type: "warning",
          });
        }
        if (type == 2) {
          data = {
            type: type,
            flag: this.COchecked,
            startTime: this.CODate1.replace("-", ""),
          };
        } else {
          data = {
            type: type,
            flag: this.COchecked,
            startTime: this.CODate1,
          };
        }
      }
      // return;

      let res = await service({
        method: "get",
        url: "/report/carbon-emissions",
        params: data,
      });

      if (res.status == "SUCCESS") {
        this.loading = false;
      }

      let numberList = res.data;
      if (!this.COchecked && this.COLong == "天") {
        if (this.CODate1 == getToday()) {
          time1 = getFormatHourTime("4");
        } else {
          time1 = getFormatHourTime("3");
        }
      } else if (this.COchecked && this.COLong == "天") {
        let date1 = this.CODate1;
        let date2 = this.CODate2;
        time1 = getDateRange(date1, date2);
      } else if (!this.COchecked && this.COLong == "周") {
        time1 = getWeekDateRange(this.CODate1);
      } else if (this.COchecked && this.COLong == "周") {
        let week1 = this.CODate1;
        let week2 = this.CODate2;
        time1 = firstCityWeek(week1, week2);
      } else if (!this.COchecked && this.COLong == "月") {
        time1 = getMonthDates(this.CODate1);
      } else if (this.COchecked && this.COLong == "月") {
        time1 = generateMonthRange(this.CODate1, this.CODate2);
      } else if (!this.COchecked && this.COLong == "年") {
        time1 = getYearMonths(this.date1);
      } else if (this.COchecked && this.COLong == "年") {
        // time1 = generateMonthRange(this.date1, this.date2);
        time1 = getYearRange(this.CODate1, this.CODate2);
      }

      let time = [],
        timeAndNumber = [],
        timeAndNumber1 = [],
        timeAndNumber2 = [],
        number1 = [],
        number2 = [],
        number = [];
      try {
        if (!numberList) {
          // return this.$message({
          //   message: "获取相关数据失败",
          //   type: "warning",
          // });
        }
      } catch (error) {}

      if (!this.COchecked) {
        if (this.COLong == "天") {
          if (numberList.length > 0) {
            const [arr1, arr2, arr3] = processGuangFuDayHour(numberList);

            timeAndNumber = completeMissingTimes(time1, arr1);
            timeAndNumber1 = completeMissingTimes(time1, arr2);
            timeAndNumber2 = completeMissingTimes(time1, arr3);

            arrEach(timeAndNumber, time, number);

            arrEachsingle(timeAndNumber1, number1);
            arrEachsingle(timeAndNumber2, number2);
          } else {
            arrEachfour(time1, time, number, number1, number2);
          }
          // this.option1 = this.optionLine;
        } else if (this.COLong == "周") {
          if (numberList.length == 0) {
            arrEachfour(time1, time, number, number1, number2);
          } else {
            numberList = completeMissingTimes(time1, numberList);
            numberList.forEach((item) => {
              const [yearWeek, value, value1, value2] = item;

              time.push(yearWeek);
              number.push(value);
              number1.push(value1);
              number2.push(value2);
            });
            // time = completeMissingTimes(time1, time);
            // console.log(time);
            // number = completeMissingTimes(time1, number);
            // number1 = completeMissingTimes(time1, number1);
            // number2 = completeMissingTimes(time1, number2);
          }
        } else if (this.COLong == "月") {
          if (numberList.length == 0) {
            arrEachfour(time1, time, number, number1, number2);
          } else {
            numberList = completeMissingTimes(time1, numberList);
            numberList.forEach((item) => {
              const [yearWeek, value, value1, value2] = item;
              time.push(yearWeek);
              number.push(value);
              number1.push(value1);
              number2.push(value2);
            });
          }
        } else if (this.COLong == "年") {
          if (numberList.length == 0) {
            arrEachfour(time1, time, number, number1, number2);
          } else {
            numberList.forEach((item) => {
              item[0] = item[0] + "月";
            });
            numberList = completeMissingTimes(time1, numberList);

            numberList.forEach((item) => {
              const [yearWeek, value, value1, value2] = item;
              time.push(yearWeek);
              number.push(value);
              number1.push(value1);
              number2.push(value2);
            });
          }
        }
      } else if (this.COchecked) {
        if (this.COLong == "天") {
          if (numberList.length == 0) {
            arrEachfour(time1, time, number, number1, number2);
          } else {
            const { array1, array2, array3 } = transforCheckDay1(numberList);

            timeAndNumber = completeMissingTimes(time1, array1);
            timeAndNumber1 = completeMissingTimes(time1, array2);
            timeAndNumber2 = completeMissingTimes(time1, array3);
            timeAndNumber.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
            });
            timeAndNumber1.forEach((item) => {
              number1.push(item[1]);
            });
            timeAndNumber2.forEach((item) => {
              number2.push(item[1]);
            });
          }
        } else if (this.COLong == "周") {
          if (numberList.length == 0) {
            arrEachfour(time1, time, number, number1, number2);
          } else {
            const { array1, array2, array3 } = transformData1(numberList);

            timeAndNumber = completeMissingTimes(time1, array1);
            timeAndNumber1 = completeMissingTimes(time1, array2);
            timeAndNumber2 = completeMissingTimes(time1, array3);
            timeAndNumber.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
            });
            timeAndNumber1.forEach((item) => {
              number1.push(item[1]);
            });
            timeAndNumber2.forEach((item) => {
              number2.push(item[1]);
            });
          }
        } else if (this.COLong == "月") {
          if (numberList.length == 0) {
            arrEachfour(time1, time, number, number1, number2);
          } else {
            const [result1, result2, result3] = deilWithMonth1(numberList);
            timeAndNumber = completeMissingTimes(time1, result1);
            timeAndNumber1 = completeMissingTimes(time1, result2);
            timeAndNumber2 = completeMissingTimes(time1, result3);
            timeAndNumber.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
            });
            timeAndNumber1.forEach((item) => {
              number1.push(item[1]);
            });
            timeAndNumber2.forEach((item) => {
              number2.push(item[1]);
            });
          }
        } else if (this.COLong == "年") {
          if (numberList.lengh == 0) {
            arrEachfour(time1, time, number, number1, number2);
          } else {
            const [result1, result2, result3] = deilWithYear1(numberList);
            timeAndNumber = completeMissingTimes(time1, result1);
            timeAndNumber1 = completeMissingTimes(time1, result2);
            timeAndNumber2 = completeMissingTimes(time1, result3);
            timeAndNumber.forEach((item) => {
              time.push(item[0]);
              number.push(item[1]);
            });
            timeAndNumber1.forEach((item) => {
              number1.push(item[1]);
            });
            timeAndNumber2.forEach((item) => {
              number2.push(item[1]);
            });
          }
        }
      }

      this.option5 = Indexoption5Three;
      this.option5.xAxis.data = time;
      this.option5.series[0].data = number;
      this.option5.series[1].data = number1;

      chart7.setOption(this.option5, {
        notMerge: true, // 不合并旧配置
        lazyUpdate: true,
      });
    },
    clearDate() {
      this.cityDate1 = "";
      this.cityDate2 = "";
    },

    async getCityLine() {
      let type = null,
        type1 = null;

      if (this.selectLast == "市电") {
        type1 = 1;
      } else if (this.selectLast == "燃气") {
        type1 = 2;
      } else if (this.selectLast == "光伏") {
        type1 = 4;
      }
      type = getChooseTime(this.cityLong);

      let data = {};
      let time1 = [];

      if (this.citychecked) {
        if (!this.cityDate2 || !this.cityDate1) {
          this.$message({
            message: "自定义状态下,时间1与时间2必须同时存在",
            type: "warning",
          });
        } else {
          if (type == 2) {
            data = {
              type: type,
              flag: this.citychecked,
              deviceType: type1,
              startTime: this.cityDate1.replace("-", ""),
              endTime: this.cityDate2.replace("-", ""),
            };
          } else {
            data = {
              type: type,
              deviceType: type1,
              flag: this.citychecked,
              startTime: this.cityDate1,
              endTime: this.cityDate2,
            };
          }
        }
      } else if (!this.citychecked) {
        if (!this.cityDate1) {
          this.$message({
            message: "时间1不可缺少",
            type: "warning",
          });
        }
        if (type == 2) {
          data = {
            type: type,
            flag: this.citychecked,
            deviceType: type1,
            startTime: this.cityDate1.replace("-", ""),
          };
        } else {
          data = {
            type: type,
            flag: this.citychecked,
            deviceType: type1,
            startTime: this.cityDate1,
          };
        }
      }
      // return;

      let res = await service({
        method: "get",
        url: "/report/device-type-line",
        params: data,
      });

      if (res.status == "SUCCESS") {
        this.loading = false;
      }
      let numberList = res.data;

      if (!this.citychecked && this.cityLong == "天") {
        if (this.cityDate1 == getToday()) {
          time1 = getTodayArr("1");
        } else {
          time1 = getTodayArr("2");
        }
      } else if (this.citychecked && this.cityLong == "天") {
        let date1 = this.cityDate1;
        let date2 = this.cityDate2;
        time1 = completeTimeRange(date1, date2);
      } else if (!this.citychecked && this.cityLong == "周") {
        let week1 = this.cityDate1;
        time1 = getWeekDateRange(week1);
      } else if (this.citychecked && this.cityLong == "周") {
        let week1 = this.cityDate1;
        let week2 = this.cityDate2;

        time1 = firstCityWeek(week1, week2);
      } else if (!this.citychecked && this.cityLong == "月") {
        time1 = getMonthDates(this.cityDate1);
      } else if (this.citychecked && this.cityLong == "月") {
        time1 = generateMonthRange(this.cityDate1, this.cityDate2);
      } else if (!this.citychecked && this.cityLong == "年") {
        time1 = getYearMonths(this.date1);
      } else if (this.citychecked && this.cityLong == "年") {
        // time1 = generateMonthRange(this.date1, this.date2);
        time1 = getYearRange(this.cityDate1, this.cityDate2);
      }

      let time = [],
        timeAndNumber = [],
        timeAndNumber1 = [],
        number1 = [],
        number = [];
      try {
        if (!numberList) {
          return this.$message({
            message: "获取相关数据失败",
            type: "warning",
          });
        }
      } catch (error) {}
      if (type1 == 1 || type1 == 2) {
        if (!this.citychecked) {
          if (this.cityLong == "天") {
            if (numberList.length > 0) {
              timeAndNumber = processData(numberList);

              timeAndNumber = completeMissingTimes(time1, timeAndNumber);
              arrEach(timeAndNumber, time, number);
            } else {
              timeAndNumber = completeMissingTimes(time1, timeAndNumber);
              arrEach(timeAndNumber, time, number);
            }
            // this.option1 = this.optionLine;
          } else if (this.cityLong == "周") {
            if (numberList.length == 0) {
              arrEach(time1, time, number);
            } else {
              timeAndNumber = completeMissingTimes(time1, numberList);
              arrEach(timeAndNumber, time, number);
            }
          } else if (this.cityLong == "月") {
            if (numberList.length == 0) {
              arrEach(time1, time, number);
            } else {
              timeAndNumber = completeMissingTimes(time1, numberList);
              arrEach(timeAndNumber, time, number);
            }
          } else if (this.cityLong == "年") {
            if (numberList.length == 0) {
              arrEach(time1, time, number);
            } else {
              timeAndNumber = completeMissingTimes(time1, numberList);
              arrEach(timeAndNumber, time, number);
            }
          }
        } else if (this.citychecked) {
          if (this.cityLong == "天") {
            if (numberList.length == 0) {
              arrEach(time1, time, number);
            } else {
              timeAndNumber = completeMissingTimes(time1, numberList);
              arrEach(timeAndNumber, time, number);
            }
          } else if (this.cityLong == "周") {
            if (numberList.length == 0) {
              arrEach(time1, time, number);
            } else {
              timeAndNumber = formatNumberList(numberList);
              timeAndNumber = completeMissingTimes(time1, timeAndNumber);

              arrEach(timeAndNumber, time, number);
            }
          } else if (this.cityLong == "月") {
            if (numberList.length == 0) {
              arrEach(time1, time, number);
            } else {
              numberList.forEach((item) => {
                item[0] = item[0] + "月";
              });
              timeAndNumber = completeMissingTimes(time1, numberList);
              arrEach(timeAndNumber, time, number);
            }
          } else if (this.cityLong == "年") {
            if (numberList.lengh == 0) {
              arrEach(time1, time, number);
            } else {
              numberList.forEach((item) => {
                item[0] = item[0] + "年";
              });
              timeAndNumber = [];
              timeAndNumber = completeMissingTimes(time1, numberList);
              arrEach(timeAndNumber, time, number);
            }
          }
        }
        this.option4 = this.option4Line;
        // axisLabel
        this.option4.xAxis[0].axisLabel.rotate = 0;
        if (type1 == 2) {
          this.option4.yAxis[0].name = "单位:m³";
        } else {
          this.option4.yAxis[0].name = "单位:KW.h";
        }
        if (type1 == 1) {
          this.option4.legend.data = ["电力"];
          this.option4.series[0].name = "电力";
        } else {
          this.option4.legend.data = ["燃气"];
          this.option4.series[0].name = "燃气";
        }
        this.option4.series[0].data = number;
        this.option4.xAxis[0].data = time;

        chart6.setOption(this.option4, {
          notMerge: true, // 不合并旧配置
          lazyUpdate: true,
        });
      } else {
        if (!this.citychecked) {
          if (this.cityLong == "天") {
            if (numberList.length > 0) {
              const [arr1, arr2] = processGuangFuDayHour1(numberList);
              timeAndNumber = completeMissingTimes(time1, arr1);
              timeAndNumber1 = completeMissingTimes(time1, arr2);

              arrEach(timeAndNumber, time, number);
              arrEachsingle(timeAndNumber1, number1);
            } else {
              arrEachThree(time1, time, number, number1);
            }
            // this.option1 = this.optionLine;
          } else if (this.cityLong == "周") {
            if (numberList.length == 0) {
              arrEachThree(time1, time, number, number1);
            } else {
              const [yearWeek, value, value1] = numberList[0];
              const year = yearWeek.substring(0, 4);
              const week = yearWeek.substring(4);
              time.push(`${year}年第${week}周`);
              number.push(value);
              number1.push(value1);
            }
          } else if (this.cityLong == "月") {
            if (numberList.length == 0) {
              arrEachThree(time1, time, number, number1);
            } else {
              numberList.forEach((item) => {
                time.push(item[0] + "月");
                number.push(item[1]);
                number1.push(item[2]);
              });
              time = completeMissingTimes(time1, time);
              number = completeMissingTimes(time1, number);
              number1 = completeMissingTimes(time1, number1);
            }
          } else if (this.cityLong == "年") {
            if (numberList.length == 0) {
              arrEachThree(time1, time, number, number1);
            } else {
              numberList.forEach((item) => {
                time.push(item[0] + "年");
                number.push(item[1]);
                number1.push(item[2]);
              });
              time = completeMissingTimes(time1, time);
              number = completeMissingTimes(time1, number);
              number1 = completeMissingTimes(time1, number1);
            }
          }
        } else if (this.citychecked) {
          if (this.cityLong == "天") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            } else {
              const { array1, array2 } = transforCheckDay(numberList);
              timeAndNumber = completeMissingTimes(time1, array1);
              timeAndNumber1 = completeMissingTimes(time1, array2);

              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            }
          } else if (this.cityLong == "周") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            } else {
              const { array1, array2 } = transformData(numberList);
              timeAndNumber = completeMissingTimes(time1, array1);
              timeAndNumber1 = completeMissingTimes(time1, array2);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            }
          } else if (this.cityLong == "月") {
            if (numberList.length == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            } else {
              const [result1, result2] = deilWithMonth(numberList);
              timeAndNumber = completeMissingTimes(time1, result1);
              timeAndNumber1 = completeMissingTimes(time1, result2);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            }
          } else if (this.cityLong == "年") {
            if (numberList.lengh == 0) {
              time1.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
                number1.push(item[1]);
              });
            } else {
              const [result1, result2] = deilWithYear(numberList);
              timeAndNumber = completeMissingTimes(time1, result1);
              timeAndNumber1 = completeMissingTimes(time1, result2);
              timeAndNumber.forEach((item) => {
                time.push(item[0]);
                number.push(item[1]);
              });
              timeAndNumber1.forEach((item) => {
                number1.push(item[1]);
              });
            }
          }
        }

        this.option4 = option4Line;
        this.option4.xAxis[0].data = time;
        this.option4.yAxis[0].name = "单位:KW.h";
        this.option4.series[0].data = number;
        this.option4.series[1].data = number1;

        // this.option4.series[1].data = number1;
        chart6.setOption(this.option4, {
          notMerge: true, // 不合并旧配置
          lazyUpdate: true,
        });
      }
    },

    clickLeft() {
      let width = document.documentElement.offsetWidth;
      let left = $(".bigBing").scrollLeft();
      $(".bigBing").scrollLeft(left - (width / 100) * 16.6);
    },
    clickRight() {
      let width = document.documentElement.offsetWidth;
      let left = $(".bigBing").scrollLeft();
      $(".bigBing").scrollLeft(left + (width / 100) * 16.6);
    },
    async getWarning() {
      let res = await service({
        method: "get",
        url: "/report/device-warn",
      });
      try {
        if (res.status == "SUCCESS") {
          this.dataList = res.data;
        }
      } catch (error) {}
    },

    async getStatus() {
      let res = await service({
        mthod: "get",
        url: "/report/device-state",
      });

      // let all=
      if (res.data) {
        this.allDevice = res.data.offLine + res.data.onLine + res.data.warmNum;
        this.deviceStatus.online = res.data.onLine;
        this.deviceStatus.offline = res.data.offLine;
        this.deviceStatus.warn = res.data.warmNum;
        let allLineSmall = document.getElementsByClassName("lineSmall");
        allLineSmall[0].style.width =
          (this.deviceStatus.online / this.allDevice) * 100 + "%";
        allLineSmall[1].style.width =
          (this.deviceStatus.warn / this.allDevice) * 100 + "%";
        allLineSmall[2].style.width =
          (this.deviceStatus.offline / this.allDevice) * 100 + "%";

        this.option3.series[0].data[0] = {
          name: "离线设备",
          value: this.deviceStatus.offline,
        };
        this.option3.series[0].data[1] = {
          name: "告警设备",
          value: this.deviceStatus.warn,
        };
        this.option3.series[0].data[2] = {
          name: "正常设备",
          value: this.deviceStatus.online,
        };

        chart5.setOption(this.option3);
      }
    },
    async getUserPresent() {
      let that = this;
      let res = await service({
        method: "get",
        url: "/report/group-proportion",
        params: {
          date: this.groupEnenger,
        },
      });

      console.log("res=", res);
      if (chartContainList.length > 0) {
        chartContainList.forEach((item) => {
          item.dispose();
        });
      }
      this.groupAll = res.data.groupData;
      this.total = res.data.total;
      this.pieList = [];
      this.groupAll.forEach((item) => {
        this.pieList.push(item.itemList);
      });
      this.groupAll.forEach((item) => {
        let total = 0;
        item.itemList.forEach((ite) => {
          total += ite.value;
        });
        item.total = formatNumber(total);
      });
      this.$nextTick(function () {
        setTimeout(function () {
          let element = document.getElementsByClassName("chart3d");
          for (let i = 0; i < that.pieList.length; i++) {
            that.initPie(element[i], that.pieList[i]);
          }
        }, 500);
      });
    },

    disabledDate(time) {
      // 只允许选择今天之后的日期
      return time.getTime() > new Date().getTime();
    },
    async getLineNumber() {
      this.loading = true;
      let type = null;
      type = getChooseTime(this.selectLong);
      let data = {};
      let time1 = [];
      if (this.checked) {
        if (!this.date2 || !this.date1) {
          this.$message({
            message: "自定义状态下,时间1与时间2必须同时存在",
            type: "warning",
          });
        } else {
          if (type == 2) {
            data = {
              type: type,
              flag: this.checked,
              startTime: this.date1.replace("-", ""),
              endTime: this.date2.replace("-", ""),
            };
          } else {
            data = {
              type: type,
              flag: this.checked,
              startTime: this.date1,
              endTime: this.date2,
            };
          }
        }
      } else if (!this.checked) {
        if (!this.date1) {
          this.$message({
            message: "时间1不可缺少",
            type: "warning",
          });
        }
        if (type == 2) {
          data = {
            type: type,
            flag: this.checked,
            startTime: this.date1.replace("-", ""),
          };
        } else {
          data = {
            type: type,
            flag: this.checked,
            startTime: this.date1,
          };
        }
      }
      // return;

      let res = await service({
        method: "get",
        url: "/report/total-line",
        params: data,
      });

      if (res.status == "SUCCESS") {
        this.loading = false;
      }
      let numberList = res.data;

      if (!this.checked && this.selectLong == "天") {
        if (this.date1 == getToday()) {
          time1 = getTodayArr("1");
        } else {
          time1 = getTodayArr("2");
        }
      } else if (this.checked && this.selectLong == "天") {
        let date1 = this.date1;
        let date2 = this.date2;
        time1 = completeTimeRange(date1, date2);
      } else if (!this.checked && this.selectLong == "周") {
        let week1 = this.date1;

        // time1 = [`${year}第${week}周`, 0];

        time1 = getWeekDateRange(week1);
      } else if (this.checked && this.selectLong == "周") {
        let week1 = this.date1;
        let week2 = this.date2;
        time1 = generateWeekRange(week1, week2);
      } else if (!this.checked && this.selectLong == "月") {
        time1 = getMonthDates(this.date1);
      } else if (this.checked && this.selectLong == "月") {
        time1 = generateMonthRange(this.date1, this.date2);
      } else if (!this.checked && this.selectLong == "年") {
        time1 = getYearMonths(this.date1);
      } else if (this.checked && this.selectLong == "年") {
        time1 = getYearRange(this.date1, this.date2);
      }

      let time = [],
        timeAndNumber = [],
        number = [];
      try {
        if (!numberList) {
          return this.$message({
            message: "获取分组相关数据失败",
            type: "warning",
          });
        }
      } catch (error) {}
      if (!this.checked) {
        if (this.selectLong == "天") {
          if (numberList.length > 0) {
            numberList.forEach((item) => {
              const date = new Date(item[0]);
              const hours = date.getHours();
              const minutes = String(date.getMinutes()).padStart(2, "0");
              timeAndNumber.push([`${hours}:${minutes}`, item[1]]);
            });
            timeAndNumber = completeMissingTimes(time1, timeAndNumber);
            arrEach(timeAndNumber, time, number);
          } else {
            timeAndNumber = completeMissingTimes(time1, timeAndNumber);
            arrEach(timeAndNumber, time, number);
          }
        } else if (this.selectLong == "周") {
          if (numberList.length == 0) {
            arrEach(time1, time, number);
          } else {
            timeAndNumber = completeMissingTimes(time1, numberList);
            arrEach(timeAndNumber, time, number);
          }
        } else if (this.selectLong == "月") {
          if (numberList.length == 0) {
            arrEach(time1, time, number);
          } else {
            timeAndNumber = completeMissingTimes(time1, numberList);
            arrEach(timeAndNumber, time, number);
          }
        } else if (this.selectLong == "年") {
          if (numberList.length == 0) {
            arrEach(time1, time, number);
          } else {
            numberList.forEach((item) => {
              item[0] = item[0] + "月";
            });
            timeAndNumber = completeMissingTimes(time1, numberList);
            arrEach(timeAndNumber, time, number);
          }
        }
        this.option1 = this.optionDay;
      } else if (this.checked) {
        if (this.selectLong == "天") {
          if (numberList.length == 0) {
            arrEach(time1, time, number);
          } else {
            timeAndNumber = completeMissingTimes(time1, numberList);
            arrEach(timeAndNumber, time, number);
          }
        } else if (this.selectLong == "周") {
          if (numberList.length == 0) {
            arrEach(time1, time, number);
          } else {
            numberList = formatNumberList(numberList);
            timeAndNumber = completeMissingTimes(time1, numberList);
            arrEach(timeAndNumber, time, number);
          }
        } else if (this.selectLong == "月") {
          if (numberList.length == 0) {
            arrEach(time1, time, number);
          } else {
            numberList.forEach((item) => {
              item[0] = item[0] + "月";
            });
            timeAndNumber = completeMissingTimes(time1, numberList);
            arrEach(timeAndNumber, time, number);
          }
        } else if (this.selectLong == "年") {
          if (numberList.length == 0) {
            arrEach(time1, time, number);
          } else {
            numberList.forEach((item) => {
              item[0] = item[0] + "年";
            });
            timeAndNumber = completeMissingTimes(time1, numberList);
            arrEach(timeAndNumber, time, number);
          }
        }
      }
      this.option1 = this.optionDay;
      this.option1.xAxis.axisLabel.rotate = 0;
      this.option1.xAxis.data = time;
      this.option1.series[0].data = number;
      chrat1.setOption(this.option1, {
        notMerge: true, // 不合并旧配置
        lazyUpdate: true,
      });
      totalNumber = number;
      // }
    },
    selectTimeDuring() {
      this.date1 = "";
      this.date2 = "";
      this.hourTime = "";
    },
    selectTimeDuring1() {
      this.CODate1 = "";
      this.CODate2 = "";
    },
    caculateTimeS(a, b) {
      if (this.checked) {
        if (this.selectLong == "天") {
          if (a && b) {
            let time1 = new Date(a).getTime();
            let time2 = new Date(b).getTime();
            let actualTime = (time2 - time1) / 1000;
            if (actualTime < 0) {
              this.date2 = "";
              return this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getLineNumber();
            }
          }
        } else if (this.selectLong == "周") {
          if (a && b) {
            let time1 = a.replace("-", "");
            let time2 = b.replace("-", "");
            if (time1 > time2) {
              this.date2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getLineNumber();
            }
          }
        } else if (this.selectLong == "月") {
          if (a && b) {
            let time1 = a.replace("-", "");
            let time2 = b.replace("-", "");
            if (time1 > time2) {
              this.date2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getLineNumber();
            }
          }
        } else if (this.selectLong == "年") {
          if (a && b) {
            let time1 = a;
            let time2 = b;
            if (time1 > time2) {
              this.date2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getLineNumber();
            }
          }
        }
      } else {
        this.getLineNumber();
      }
    },
    caculateTimeS1(a, b) {
      if (this.citychecked) {
        if (this.cityLong == "天") {
          if (a && b) {
            let time1 = new Date(a).getTime();
            let time2 = new Date(b).getTime();
            let actualTime = (time2 - time1) / 1000;

            if (actualTime < 0) {
              this.cityDate2 = "";
              return this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getCityLine();
            }
          }
        } else if (this.cityLong == "周") {
          if (a && b) {
            let time1 = a.replace("-", "");
            let time2 = b.replace("-", "");
            if (time1 > time2) {
              this.cityDate2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getCityLine();
            }
          }
        } else if (this.cityLong == "月") {
          if (a && b) {
            let time1 = a.replace("-", "");
            let time2 = b.replace("-", "");
            if (time1 > time2) {
              this.cityDate2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getCityLine();
            }
          }
        } else if (this.cityLong == "年") {
          if (a && b) {
            let time1 = a;
            let time2 = b;
            if (time1 > time2) {
              this.cityDate2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getCityLine();
            }
          }
        }
      } else if (!this.citychecked) {
        if (this.cityDate1) {
          this.getCityLine();
        }
      }
    },
    caculateTimeS2(a, b) {
      if (this.COchecked) {
        if (this.COLong == "天") {
          if (a && b) {
            let time1 = new Date(a).getTime();
            let time2 = new Date(b).getTime();
            let actualTime = (time2 - time1) / 1000;
            if (actualTime < 0) {
              this.CODate2 = "";
              return this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getCOLineNumber();
            }
          }
        } else if (this.COLong == "周") {
          if (a && b) {
            let time1 = a.replace("-", "");
            let time2 = b.replace("-", "");
            if (time1 > time2) {
              this.CODate2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getCOLineNumber();
            }
          }
        } else if (this.COLong == "月") {
          if (a && b) {
            let time1 = a.replace("-", "");
            let time2 = b.replace("-", "");
            if (time1 > time2) {
              this.CODate2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getCOLineNumber();
            }
          }
        } else if (this.COLong == "年") {
          if (a && b) {
            let time1 = a;
            let time2 = b;
            if (time1 > time2) {
              this.CODate2 = "";
              this.$message({
                message: "时间2不能早于时间1,已重置时间2",
                type: "warning",
              });
            } else {
              this.getCOLineNumber();
            }
          }
        }
      } else {
        if (this.CODate1) {
          this.getCOLineNumber();
        }
      }
    },
    changeShow() {
      if (this.changePageName == "分组大屏") {
        this.$router.push("/homePageFen");
      } else if (this.changePageName == "首页大屏") {
        this.$router.push("/homePage");
      }
    },

    initChart() {
      this.option1.xAxis.data = [];
      this.option1.series[0].data = [];
      chrat1 = echarts.init(document.getElementsByClassName("chart1")[0]);
      chrat1.setOption(this.option1);

      chart5 = echarts.init(document.getElementsByClassName("chart5")[0]);
      chart5.setOption(this.option3);
      chart6 = echarts.init(document.getElementsByClassName("chart6")[0]);
      chart6.setOption(this.option4);
      chart7 = echarts.init(document.getElementsByClassName("chart7")[0]);
      chart7.setOption(this.option5);
    },
    backIndexPage() {
      this.$router.push("/index");
    },
    handleResize() {
      if (chrat1) {
        chrat1.resize();
      }
      if (chart2) {
        chart2.resize();
      }
      if (chart3) {
        chart3.resize();
      }
      if (chart4) {
        chart4.resize();
      }
      if (chart5) {
        chart5.resize();
      }
      if (chart6) {
        chart6.resize();
      }
      if (chart7) {
        chart7.resize();
      }
    },
    chooseTime(a) {
      let element = document.getElementsByClassName("smallChoose");
      for (let i = 0; i < element.length; i++) {
        element[i].style.background = "#BABABA";
      }
      a.target.style.background = "#00A4FF";
    },
    chooseTime1(a) {
      let element = document.getElementsByClassName("smallChoose1");
      for (let i = 0; i < element.length; i++) {
        element[i].style.background = "#BABABA";
      }
      a.target.style.background = "#00A4FF";
    },
  },
  watch: {},
  created() {
    const today = new Date(); // 获取当前日期对象
    // 提取年、月、日并补零
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需+1
    const day = String(today.getDate()).padStart(2, "0");

    // 组合成 YYYY-MM-DD 格式
    this.date1 = `${year}-${month}-${day}`;
    this.cityDate1 = `${year}-${month}-${day}`;
    this.groupEnenger = `${year}-${month}-${day}`;
    this.CODate1 = `${year}-${month}-${day}`;
    this.getLineNumber();
    this.getUserPresent();
    this.getCityLine();
    this.getCOLineNumber();
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      window.addEventListener("resize", this.handleResize);
    });

    if (window.screen.availWidth > 1920) {
      this.bigScreen = true;
    }
    console.log(sessionStorage.getItem("token"));
    // this.initChartR2();

    this.getStatus();
    this.getWarning();
  },
  beforeUnmount() {
    // Vue 3（Vue 2 用 beforeDestroy）
    window.addEventListener("resize", this.handleResize);
  },
};
</script>
<style lang="less" scoped >
// :deep(.el-select .el-select__wrapper) {
//   height: 50px !important;
// }时间1

.changePage{
  width: 8vw;
  height: 4vh;
  position: absolute;
  left: 7vw;
  top: 5vh;
}
.deleteWeek {
  font-size: 0.8vw;
  color: white;
  margin-left: 0.3vw;
}
.bigUnit{
  :deep(.el-select__selected-item ,.el-select__placeholder){
  color: white;
  font-size: 0.8vw; height:3vh!important;
  display: flex
  ;
  align-items: center;
}
:deep(.el-select__icon )
{
  color: white;
  font-size: 0.7vw!important;
}
:deep( .el-select__wrapper) {
  height: 3vh !important;
}
}

.changePage{
  :deep(.el-select__selected-item ,.el-select__placeholder){
  color: white;
  font-size: 0.8vw; height:3vh!important;
  display: flex
  ;
  align-items: center;
}
:deep(.el-select__icon )
{
  color: white;
  font-size: 0.7vw!important;
}
:deep( .el-select__wrapper) {
  height: 3vh !important;
}

}
.topSelect{
  :deep(.el-select__selected-item ,.el-select__placeholder){
  color: white;
  font-size: 0.8vw; height:3vh!important;
  display: flex
  ;
  align-items: center;
}
:deep(.el-select__icon )
{
  color: white;
  font-size: 0.7vw!important;
}
:deep( .el-select__wrapper) {
  height: 3vh !important;
}

}

:deep(.el-table__row td) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
:deep(.el-table__cell) {
  padding-top: 0 !important;
  /* padding-bottom: 0 !important; */
}

.el-datePicker{
  font-size: 1vw;
}
:deep(.el-input__inner,.el-input__inner::placeholder){
  color:white;font-size: 0.8vw;
}

:deep(.el-input__inner){
  color: white;
  height: 3.5vh !important;
}
:deep(.el-input--prefix){
  height: 3.5vh !important;
}
:deep(.el-input__wrapper){
  padding-left:0.5vw!important;
  height: 3.5vh !important;
}
:deep(.el-input__icon ){
  color: white;
 font-size: 0.7vw;
}
.tableContain{
  width: 88%;
  margin: 0 auto;
}
.el-table {
  font-size: 0.6vw;
}
.el-table_1_column_1 span{
  height:4vh!important
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
  background-color: rgba(0,0,0,0) !important;
}


.table-container-4k {
  transform: scale(2);
  transform-origin: 0 0;
  width: 50%;  /* 缩放后宽度会加倍，所以需要减半 */
  height: 50%; /* 同理高度减半 */
}


.pageContain {
  width: 100%;
  height: 100vh;
  background: url(@/assets/img/big/bigBack.png);
  background-size: 100% 100%;
  overflow: hidden;
}
.bigTop {
  width: 99vw;
  height: 7.3vh;
  background: url(@/assets/img/big/bigTop.png);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;

  background-size: 100% 100%;
  .bigTopName {
    margin-top: -1vh;
    background: linear-gradient(to bottom, white, #0df4ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.8vw;
    letter-spacing: 0.2vw;
    font-weight: 800;
    font-family: smallMenu;
  }
}
.bigCenter {
  width: 95vw;
  padding-top: 2vh;
  margin: auto;
  justify-content: space-between;
  .bigLeft {
    width: 62.7vw;
    // height: 30.6vh;
    // background: url(@/assets/img/big/bigLeft.png);
    // background-size: 100% 100%;
    .bigLeftTop {
      width: 62.7vw;
      height: 30.6vh;
      background: url(@/assets/img/big/bigLeft.png);
      background-size: 100% 100%;

      // overflow: hidden;
      .bigTopUse {
        padding-top: 1vh;
        height: 5vh;

        .bigUnit {
          margin-top: 1vh;
          color: white;
          display: flex;
          font-size: 0.6vw;
          margin-right: 1vw;
          height: 4vh;
          .el-select {
            margin-left: 0.5vw;
          }
        }
      }
    }
  }
  .bigRight {
    width: 31.56vw;
    .bigRightTop {
      width: 31.56vw;
      height: 37.2vh;
      background: url(@/assets/img/big/bigLeft.png);
      background-size: 100% 100%;
    }
  }
}
.bigChartName {
          margin-left: 1vw;
          background: linear-gradient(to bottom, white, #0df4ff);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 1.5vw;
          letter-spacing: 0.1vw;
          font-weight: 800;
          font-family: smallMenu;
        }
.backIndex {
  width: 1.77vw;
  height: 2.88vh;
  background: url(@/assets/img/big/bigBackIndex.png);
  background-size: 100% 100%;
  position: absolute;
  left: 4vw;
  top: 5vh;
}
.chart1Contain {
  width: 100%;
  height: 233px;

}
// :deep(.el-table .cell) {
//   padding: 0 !important;
// }
// :deep(.cell) {
//   padding: 0 !important;
// }
/* 在你的全局样式文件（例如 main.css 或 App.vue 的 <style>）中 */
.el-table .el-table__body tr {
  background-color: transparent !important; /* 设置为透明背景 */
}
:deep(.el-checkbox__inner){
border:1px solid #0281B8;
}

.chart2,
.chart3,
.chart4 {
  width: 8vw;
  height: 14vh;
}
.chart3d{
  width: 16.6vw;
  height: 16vh;
}
.chart1 {
  width: 100%;
  height:24vh
  // background: red;
}
.useElect {
  width: 100%;
  height: 30px;
  padding-bottom: 10px;
}
.useAll {
  color: black;
}
.useAllElect {
  width: 100%;
  // height: 200px;
  border: 1px solid black;
  padding: 10px 0;
}
.bigNameContain{
  width: 100%;

    .bigDot{
      width: 0.5vw;
      height: 0.5vw;
      background: red;
      border-radius: 50%;
    }
    .bigName {
      // width: 100%;
      color: white;
      font-weight: 600;
      text-align: center;
      font-size: 1.3vw;
      margin-left: 0.2vw;
    }
    }
.oneContain {
    flex-grow: 0;
    flex-shrink: 0;
    width:16.6vw;
    height: 24vh;
    .bingContain {
      width: 100%;
      height: 24vh;
      .powerAll {
        font-size: 0.7vw;
        color: white;
        div{
          span{
            color:#EC66EF
          }
        }
      }
    }
  }

.rightCalerd {
  width: 30%;
  height: 100%;
  color: black;
  .hour {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .hourOne {
      width: 16%;
      span {
        width: 30px;
        height: 30px;
        display: block;
        border-radius: 50%;
        border: 1px solid black;
        line-height: 30px;
        text-align: center;
        margin-top: 5px;
      }
    }
  }
}
.shebeiContain {
  width: 88%;

  display: flex;
  align-items: center;
  margin: auto;
  justify-content: space-between;
  // height: 400px;
  // margin-bottom: 5px;
  overflow: hidden;

  .chart5 {
    width: 10.4vw;
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    // background: red;
  }
  .rightText {
    width: 15vw;
    // height: 100%;
    // margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: white;
    .textBox {
      height: 8.9vh;
      display: flex;
      flex-direction: column;
      // justify-content: space-around;
      margin-top: 1vh;
      text-align: center;
      background: url(@/assets/img/big/shebei.png);
      background-size: 100% 100%;
      .textBoxTop{
        width: 11.77vw;
        margin:0 auto;
        margin-top: 1vh;
.boxLeft{
  width: 100%;
  display: flex;
  align-items: center;
  .dot{
    width:0.78vw;
    height: 0.78vw;
    border-radius: 50%;
    background: linear-gradient(to right, #00F0F2, #00BD36);
  }
  .dotName{
    font-size: 1vw;
    margin-left:0.5vw
  }
}

      }
    }
  }
}
.endName{
  font-size: 1.4vw;
  font-weight: 800;
}
.sheBeiLine{
  width: 11.77vw;
  height: 1.5vh;
  background: url(@/assets/img/big/lineBack.png);
  background-size: 100% 100%;
  margin:0 auto;
  margin-top: 1vh;
  overflow: hidden;
  .lineSmall{
    width:60%;
    height: 100%;
    border-radius: 0.75vh;
    background: linear-gradient(to right, #00EFEF, #00BE39);
  }
}

.bigBingContain{

  width: 95%;
  margin: auto;
// background: red;
  height: 24vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .bigLeftArr{
    width:3.7vw;
    height: 10.5vh;
    background: url(@/assets/img/big/bigLeftArr.png);
    background-size: 100% 100%;
  }
  .bigRightArr{
    width:3.7vw;
    height: 10.5vh;
    background: url(@/assets/img/big/bigRIghtArr.png);
    background-size: 100% 100%;
  }
  .bigBing{
    display: flex;
    flex-shrink:0 ;
    height: 24vh;
    width: 50vw;
overflow-y: auto;
  }
  .bigBing::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}
}
.smallRightLast{
  width: 31.56vw;
  height: 23.7vh;
  background: url(@/assets/img/big/lastBox.png);
  background-size: 100% 100%;
  margin-top: 2.3vh;
}
.manySmallContain{

  height: 23vh;
  background: url(@/assets/img/big/homeBottom.png);
  background-size: 100% 100%;
  margin-top: 2vh;
  padding:0;

  .everyCharts{
    margin-left: 1vw;
    width: 46vw;
    height: 18.6vh;
    background: url(@/assets/img/big/honeOne.png);
    background-size: 100% 100%;
  }
}
.topSelect{

  width: 100%;
  height: 4vh;
  // background: blue;
  margin: auto;
  margin-top: 1vh;
}
.chooseWhich{
  height: 4vh;
  margin-right: 1vw;
  .smallChoose{
    width: 2vw;
    height: 3vh;
    font-size: 0.8vw;
    margin-left: 0.5vw;
    background:#BABABA;
    color: white;
  }
  .smallChoose1{
    width: 2vw;
    height: 3vh;
    font-size: 0.8vw;
    margin-left: 0.5vw;
    background:#BABABA;
    color: white;
  }
}

.chart6{
  width: 100%;
  // margin: auto;
  height: 14vh;
  // margin-left: 0.5vw;
}
.chart7{
  width: 100%;
  // margin: auto;
  height: 14vh;
  margin-left: 0.5vw;
  // background: red;
}
:deep(.el-loading-mask){
  background: rgba(0,0,0,0);
}
.chartName{
  font-size: 0.6vw;
  color: white;
  margin: auto;
  text-align: center;
}
.powerAll{
  font-size: 0.6vw;
  // color: white;
  //  color: #EAEA26;
  text-align: center;
}
</style>
